<!-- 十大流通股东 -->
<template>
    <div class="container">
        <div class="table w1021" v-show="tableList.length >0">
            <div class="tableTab">
                <span
                    class="tableBtn"
                    :class="{ on: index == timeIdx }"
                    @click="onTime(item, index)"
                    v-for="(item, index) in times"
                    :key="index"
                >{{ item }}</span
                >
            </div>
        </div>
        <div class="table w1021" >
            <div class="table echar_box" v-show="pieDate.seriesData.length >0" id="ten_echarts"></div>
        </div>

        <div class="table w1021" v-show="tableList.length >0">
            <div class="tableTh tableTr flex">
                <span class="tableTd w90">股东名次</span>
                <span class="tableTd w350">股东名称</span>
                <span class="tableTd w130">股份类型</span>
                <span class="tableTd w130">持有数量(股)</span>
                <span class="tableTd w90 high">占流通股本比例</span>
                <span class="tableTd w90">持股动向</span>
                <span class="tableTd w90 high">变动数量(股)</span>
                <span class="tableTd w90">变动比例</span>
                <span class="tableTd w190">变动原因</span>
            </div>
            <div class="tableTr tableBody top flex" v-for="item in tableList" :key="item.id">
                <span class="orange tableTd w90">{{ item.rank }}</span>
                <span class="orange tableTd w350">{{ item.name }}</span>
                <span class="orange tableTd w130">{{ item.shrClsName }}</span>
                <span class="orange tableTd w130">{{ item.holdNum |filterValUnit }}</span>
                <span class="orange tableTd w90">{{ item.holdPct | filterVal }}%</span>
                <span class="orange tableTd w90">
                    <span v-if="item.inrDecNum == '不变'" class="changeNO">{{ item.inrDecNum }}</span>
                    <span v-else-if="item.inrDecNum == '减持'" class="reduce">{{ item.inrDecNum }}</span>
                    <span v-else-if="item.inrDecNum == '新进'" class="increase">{{ item.inrDecNum }}</span>
                    <span v-else-if="item.inrDecNum == '增持'" class="increase_l">{{ item.inrDecNum }}</span>
                    <span v-else>{{ item.inrDecNum }}</span>
                </span>
                <span class="orange tableTd w90">
                    <span v-if="item.inrDecNum == '不变'" class="changeNO">{{ item.inrDecNum }}</span>
                    <span v-else-if="item.inrDecNum == '减持'" class="reduce">{{ item.addNum| filterValUnit }}</span>
                    <span v-else-if="item.inrDecNum == '新进'" class="increase">{{ item.inrDecNum }}</span>
                    <span v-else-if="item.inrDecNum == '增持'" class="increase_l">{{ item.addNum| filterValUnit }}</span>
                    <span v-else>{{ item.inrDecNum }}</span>
                </span>
                <span class="orange tableTd w90">
                    <span v-if="item.inrDecNum == '不变'" class="changeNO">{{ item.inrDecPct }}</span>
                    <span v-else-if="item.inrDecNum == '减持'" class="reduce">{{ item.inrDecPct }}</span>
                    <span v-else-if="item.inrDecNum == '新进'" class="increase">{{ item.inrDecPct }}</span>
                    <span v-else-if="item.inrDecNum == '增持'" class="increase_l">{{ item.inrDecPct }}</span>
                    <span v-else>{{ item.inrDecPct }}</span>
                </span>
                <span class="orange tableTd w190">{{ item.chngReasName }}</span>
            </div>
            <div class="tableNone orange w1021 top" v-if="tableList.length == 0">
                暂无数据
            </div>
        </div>
        <div class="tableNone orange w1021 top" v-if="tableList.length <1">
            暂无数据
        </div>
    </div>
</template>

<script>
//601600
import {number, f10changeNum} from "../../script/api";

export default {
    data() {
        return {
            tableList: [],
            timeIdx: 0,
            times: [],
            myChart: null,
            pieDate: {
                seriesData: [],
            },
        };
    },
    props: ["data"],
    filters: {
        filterVal(ops, num) {
            if (typeof ops == "number") {
                return number(ops, num);
            }
            return ops ? ops : "--";
        },
        filterValUnit(ops) {
            if (typeof ops == "number") {
                return f10changeNum(ops);
            }
            return ops ? ops : "--";
        },
    },
    watch: {
        data: {
            handler(newData, oldData) {
                this.times = this.handler(newData);
                this.handtableData(newData[this.times[0]]);
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        handler(res) {
            const times = Object.keys(res).sort((a, b) => {
                return new Date(b).getTime() - new Date(a).getTime();
            });
            return times;
        },
        handtableData(dataList) {
            this.tableList = [];
            this.pieDate.seriesData = [];
            let totalline = {
                name: "合计",
                holdPct: 0,
                holdNum: 0,
                shrClsName: "--",
                inrDecNum: '--',
                inrDecPct: '--',
                chngReasName: "--",

            };
            if (dataList && dataList.length > 0) {
                this.tableList = dataList.map((ele) => {
                    totalline.holdPct += ele.holdPct;
                    totalline.holdNum += ele.holdNum;
                    let peiobj = {
                        name: ele.name,
                        value: ele.holdNum,
                    };
                    this.pieDate.seriesData.push(peiobj);
                    return ele;
                });
                this.tableList.push(totalline);
            }

            this.inte();
            console.log("tableList", this.tableList);
            console.log("this.pieDate.seriesData", this.pieDate.seriesData);
        },
        onTime(time, index) {
            this.timeIdx = index;
            this.handtableData(this.data[time]);
        },
        inte() {
            if (!this.myChart) {
                this.$nextTick(() => {
                    this.myChart = this.$echarts.init(
                        document.getElementById("ten_echarts")
                    );
                    this.myEcharts();
                });
            } else {
                this.$nextTick(() => {
                    this.myEcharts();
                });
            }
        },

        myEcharts() {
            //配置图表
            var option = {
                title: {
                    text: "",
                    subtext: "",
                    left: "center",
                },
                tooltip: {
                    trigger: "item",
                    // formatter: "{a} <br/>{b} : {c} ({d}%)",
                    formatter: "{b}  ({d}%)",
                    backgroundColor: "rgba(0,0,0,1)", // 提示框背景颜色
                    textStyle: {
                        fontSize: "16px",
                        color: "#e6e6e6", // 设置文本颜色 默认#FFF
                    },
                },
                legend: {
                    type: "scroll",
                    orient: "vertical",
                    itemWidth: 10, // 设置图例图形的宽
                    itemHeight: 10, // 设置图例图形的高
                    textStyle: {
                        color: "#999999", // 图例文字颜色
                    },
                    left: 410,
                    y: "center",
                    formatter: (name) => {
                        let arr = [name];
                        return arr.join(" ");
                    },
                },
                series: [
                    {
                        name: "姓名",
                        type: "pie",
                        radius: "70%",
                        center: ["28%", "50%"],
                        data: this.pieDate.seriesData,
                        itemStyle: {
                            normal: {
                                color: function (colors) {
                                    var colorList = [
                                        "#1B64DC",
                                        "#F1A329",
                                        "#AC11DE",
                                        "#F54932",
                                        "#12CAC4",
                                        "#297388",
                                        "#FFA48C",
                                        "#FEFF82",
                                        "#DC1B96",
                                        "#F475FF",
                                    ];
                                    return colorList[colors.dataIndex];
                                },
                            },
                        },
                        // 设置值域的那指向线
                        labelLine: {
                            show: false,
                        },
                        label: {
                            show: false,
                            position: "inner", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                            // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                            // {a}指series.name  {b}指series.data的name
                            // {c}指series.data的value  {d}%指这一部分占总数的百分比
                            formatter: "{b}",
                            color: "#e6e6e6",
                        },

                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                            },
                        },
                    },
                ],
            };

            this.myChart.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
.echar_box {
    //width: 100%;
    width: 1021px;
    height: 300px;
    background: #1a1a1f;
    border: 1px solid #000000;
}

.tableTd {
    min-height: 32px !important;
}

.high {
    min-height: 57px !important;
}

.changeNO {
    color: #999999;
}

.increase {
    color: #ff3ffd;
}

.reduce {
    color: #25ed25;
}

.increase_l {
    color: #ff1b10;
}
</style>